<template>
<div v-if="Object.keys(goods).length !==0" class="base-info">
  <div class="info-title">{{goods.title}}</div>
  <div class="info-price">
    <span class="n-price">{{goods.newPrice}}</span>
    <span class="o-price">{{goods.oldPrice}}</span>
    <span class="discount" v-if="goods.discount">{{goods.discount}}</span>
  </div>
  <div class="info-other">
    <span>{{goods.columns[0]}}</span>
    <span>{{goods.columns[1]}}</span>
    <span>{{goods.services[goods.services.length-1].name}}</span>
  </div>
  <div class="info-service">
    <span class="info-service-item" v-for="index in goods.services.length-1":key="index">
      <img :src="goods.services[index-1].icon">
      <span>{{goods.services[index-1].name}}</span>
    </span>
  </div>
</div>
</template>

<script>
export default {
  name: 'DetailBaseInfo',
  props:{
    goods:{
      type:Object,
      default(){
        return{

        }
      }
    }
  }

}
</script>

<style scoped>
.base-info{
  margin-top: 20px;
  padding: 0 8px;
  color: #999;
  border-bottom: 5px solid #f2f5f8
}
.info-title{
  color: #222;
  font-size:18px;
}
.info-price{
  margin-top: 15px;
}
.info-price .n-price{
  font-size: 24px;
  color: var(--color-high-text);
}
.info-price .o-price{
  font-size: 13px;
  margin-left: 8px;
  text-decoration: line-through;
}
.info-price .discount{
  font-size: 20px;
}
.info-other{
  display: flex;
  margin-top: 23px;
}
.info-other span{
  flex: 1;
  text-align: center;
  font-size: 17px;
}
.info-service{
  margin-top: 15px;
  display: flex;
  border-top: rgba(99,99,99,0.1) 2px solid ;

}
.info-service-item{
  flex: 1;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 20px;
}
.info-service img{
  margin-right: -2px;
  width: 15px;
  height: 15px;
}
.info-service span{
  font-size: 15px;
}
</style>
